<template>
  <div id="app">
    <h3>按钮</h3>
    <sxk-button>史小坑</sxk-button>
    <sxk-button type="primary">史小坑</sxk-button>
    <sxk-button type="success">史小坑</sxk-button>
    <sxk-button type="warning">史小坑</sxk-button>
    <sxk-button type="danger">史小坑</sxk-button><br />
    <sxk-button plain>史小坑</sxk-button>
    <sxk-button plain type="primary">史小坑</sxk-button>
    <sxk-button plain type="success">史小坑</sxk-button>
    <sxk-button plain type="warning">史小坑</sxk-button>
    <sxk-button plain type="danger">史小坑</sxk-button><br />
    <sxk-button disabled>史小坑</sxk-button>
    <sxk-button disabled type="primary">史小坑</sxk-button>
    <sxk-button disabled type="success">史小坑</sxk-button>
    <sxk-button disabled type="warning">史小坑</sxk-button>
    <sxk-button disabled type="danger">史小坑</sxk-button><br />
    <sxk-button disabled plain>史小坑</sxk-button>
    <sxk-button disabled plain type="primary">史小坑</sxk-button>
    <sxk-button disabled plain type="success">史小坑</sxk-button>
    <sxk-button disabled plain type="warning">史小坑</sxk-button>
    <sxk-button disabled plain type="danger">史小坑</sxk-button><br />
    <sxk-button circle disabled type="primary" icon="data-view"></sxk-button>
    <sxk-button circle disabled type="success" icon="cry"></sxk-button>
    <sxk-button circle type="warning" icon="copy"></sxk-button>
    <sxk-button circle type="danger" icon="email"></sxk-button><br />

    <h3>输入框</h3>
    <sxk-input
      placeholder="限制长度 显示"
      maxlength="30"
      show-word-limit
    /><br />
    <sxk-input placeholder="请输入内容 可清空" clearable /><br />
    <sxk-input placeholder="请输入密码 可清空" password clearable /><br />
    <sxk-input
      placeholder="请输入密码可查看"
      password
      show-password-icon
    /><br />

    <h3>对话框</h3>
    <sxk-button @click="show = true">打开对话框</sxk-button>
    <sxk-dialog width="30%" top="200px" :visible.sync="show">
      这是一个对话框
      <template v-slot:footer>
        <sxk-button>取消</sxk-button>
        <sxk-button type="primary">确定</sxk-button>
      </template>
    </sxk-dialog>

    <h3>单选框</h3>
    <sxk-radio-group v-model="change">
      <sxk-radio label="0">男</sxk-radio>
      <sxk-radio label="1">女</sxk-radio>
    </sxk-radio-group>
  </div>
</template>

<script>
export default {
  name: 'App',

  data () {
    return {
      show: false,
      change: ''
    }
  },

  methods: {}
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3 {
  margin: 20px 0 0 20px;
}
</style>
